<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3-搜索</title>
	</head>
	
	<!-- 引入element的css样式 -->
	<link rel="stylesheet" href="../../lib/element/index.css" />
	<script type="text/javascript" src="../../lib/vue/vue.min.js" ></script>
	<!-- 引入element的js在vue引入之后 -->
	<script type="text/javascript" src="../../lib/element/index.js" ></script>
	<script src="../../lib/axios/axios.min.js"></script>
	
	<body class="box">
		<div id="app" class="container">
			<div class="backtop"></div>
		   <el-backtop target=".container .backtop"></el-backtop>
			<el-tabs type="border-card">
			  <el-tab-pane>
				<span slot="label"><i class="el-icon-date"></i> 古籍</span>
				<div>
					<el-row :gutter="30" type="flex" justify="center">
					  <el-col :span="16">
						<el-input v-model="input" placeholder="请输入内容" 
						size="large" maxlength="100" 
						@keyup.enter.native="search" 
						@change="inputChange"
						></el-input>
					  </el-col>
					  <el-col :span="8">
						<el-button type="primary" icon="el-icon-search" :loading="loading" @click="search">搜索</el-button>
					  </el-col>
					</el-row>
				</div>
			  </el-tab-pane>
			  <!-- <el-tab-pane label="消息中心">消息中心</el-tab-pane>
			  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
			  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
			</el-tabs>
			
			<div class="res" v-show="visible">
				<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
				<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
				<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
				<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
				<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
				<div v-if="searList" >
					<template v-for="(item, index) in searList" >
						<el-card class="box-card" shadow="always" :key="index">
						  <div slot="header" class="clearfix">
							<el-button style="float: left; padding: 0px 0" type="text" @click="open(item.name)" >{{item.name}}</el-button>
						  </div>
						  <div class="text item" v-html="item.content">
							<!-- {{item.content}} -->
						  </div>
						</el-card>
					</template>
				</div>
				<div v-else>
					<p><font color='red'>暂无结果！</font></p>
				</div>
				
			</div>
			<div class="block">
				<el-pagination
				  background
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="page"
				  :page-sizes="[5, 10, 20, 30]"
				  :page-size="size"
				  layout="total, sizes, prev, pager, next"
				  :total="3000">
				</el-pagination>
			</div>
		</div>
		<style>
		  .text {
		    font-size: 14px;
		  }
		
		  .item {
		    margin-bottom: 18px;
		  }
		
		  .clearfix:before,
		  .clearfix:after {
		    display: table;
		    content: "";
		  }
		  .clearfix:after {
		    clear: both
		  }
		
		  .box-card {
		    width: 480px;
		  }
		</style>
		<script>
			var Request = axios.create({
			      timeout: 10000
			})
		
			Request.interceptors.request.use((config) => {
			  // console.log(config);
			  return config;
			})
		
			Request.interceptors.response.use((response) => {
			  // console.log(response);
			  return response;
			}, (err) => {
			  // console.log(err);
			  return err;
			})
			window.$request = Request
			
		    new Vue({
		      el: '#app',
		      data: { 
				  visible: true,
				  input: '',
				  loading: false,
				  searList: [],
				  page: 1,
				  size: 5,
				  total: 100
			  },
			  methods: {
				  handleSizeChange(val) {
					  console.log(`每页 ${val} 条`);
					  this.size = val;
					  this.search();
					},
					handleCurrentChange(val) {
					  console.log(`当前页: ${val}`);
					  this.page = val;
					  this.search();
					},
				  /**
				   * 该方法参数无法添加event，原因未知？
				   * @param {Object} s
				   */
				  inputChange: function(s) {
					console.log(s)  
				  },
				  open: function(name) {
					console.log("open -> ", name);  
					window.open("http://localhost:8080/download/"+ name);
				  },
				  search: function() {
					  if(this.input === '') {
						  return;
					  }
					  this.loading = true;
					  $request.get('http://localhost:8080/api/search?q='+ this.input+"&page="+ this.page +"&size="+ this.size).then(res => {
						  this.loading = false;
						  this.visible = true;
					        console.log(res);
							let data = res.data
							if(data.code === 0) {
								this.searList = data.content.list;
								this.total = data.content.total;
							} else {
								this.$alert(data.msg, 
										'错误', {
								          confirmButtonText: '确定',
								          callback: action => {
								            /* this.$message({
								              type: 'info',
								              message: `action: ${ action }`
								            }); */ 
										}
							});
						   }
					      }).catch(err => {
					        console.log(err);
					      })
					  
					  // console.log(this.loading);
				  }
			  }
		    })
		</script>
		<style>
			.box{
			  display: -webkit-flex; /* Safari */
			  display: flex;
			  /* flex-direction: column; */
			  align-items:center;
			  justify-content:center;
			 /* height: 100%;
			  width: 100%; */
			  margin-top: 50px;
			}
			#app {
				height:500px;
				width:500px;
			}
			.res {
				width: 100%; 
				padding-top: 50px;
			}
		  .el-col {
		    border-radius: 4px;
		  }
		  .bg-purple-dark {
		    background: #99a9bf;
		  }
		  .bg-purple {
		    background: #d3dce6;
		  }
		  .bg-purple-light {
		    background: #e5e9f2;
		  }
		  .grid-content {
		    border-radius: 4px;
		    min-height: 36px;
		  }
		  .search {
			  border-radius: 4px
		  }
		</style>
	</body>
</html>
